<template>
  <el-card class="total">
    <el-row type="flex">
      <el-col :span="6" class="title">项目统计</el-col>
    </el-row>
    <el-row type="flex" class="classify">
      <el-col :span="24" class="first">
        <ul>
          <li v-for="(item, index) in totalList" :key="index">
            <div>{{ item.title }}</div>
            <div>
              <span :class="sstt[index]">{{ item.num }}</span>
              <span v-show="!isNaN(item.num)">个</span>
            </div>
          </li>
        </ul>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getMyProjectMessage } from "../../../../service/workbenchApi";

export default {
  name: "testTotal",
  components: {},
  data() {
    return {
      totalList: [
        { title: "", num: 0 },
        { title: "", num: 0 },
        { title: "", num: 0 },
        { title: "", num: "0%" },
        { title: "", num: "0%" }
      ],
      sstt: ["ss1", "ss2", "ss3", "ss4", "ss5"] // 颜色分类
    };
  },
  methods: {
    getData() {
      //非管理员项目统计
      getMyProjectMessage().then(res => {
        if (res.code == 0) {
          let obj = res.data;
          this.totalList.map((el, index) => {
            el.num = Object.values(obj)[index];
            el.title = Object.keys(obj)[index];
            return el;
          });
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>

<style lang="scss" scoped>
.total {
  width: 100%;
  height: 200px;
  // margin-top: 10px;
  .title {
    font-size: 18px;
    color: #303133;
    font-weight: bold;
  }
  .classify {
    width: 100%;
    height: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    ul {
      display: flex;
      justify-content: space-around;
      li {
        height: 40px;
        line-height: 40px;
        text-align: center;
      }
    }
  }
}
.ss1 {
  color: #00b98d;
  font-size: 36px;
  font-weight: bold;
}
.ss2 {
  color: #00b98d;
  font-size: 36px;
  font-weight: bold;
}
.ss3 {
  color: #409eff;
  font-size: 36px;
  font-weight: bold;
}
.ss4 {
  color: #409eff;
  font-size: 36px;
  font-weight: bold;
}
.ss5 {
  color: #f46b6b;
  font-size: 36px;
  font-weight: bold;
}
.total /deep/ .el-card__body {
  padding: 0 20px !important;
}
</style>